<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css">
	<link rel="stylesheet" href="<%=basePath %>css/style.css">
	<link rel="stylesheet" href="<%=basePath %>css/datePicker.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath %>js/select2/select2.css"  />
	<link rel="stylesheet" href="<%=basePath %>css/mystyle.css">
	<title></title>
</head>
<body>
	<jsp:include page="../include/top.jsp"/>

	<div class="container" style="margin-top:100px">
		<div class="row">
			<div class="span2">
				<jsp:include page="../include/left.jsp">
					<jsp:param value="contact" name="tag"/>
				</jsp:include>
			</div>
			<div class="span10" style="margin:0px;">

				<div class="well">
					<div class="header">
						<div class="tagName">
							<h4 style="display:inline" >标签名为“<span style="font-weight: bold;" id="tagTitle">${tagName }</span>”的客户</h4>
							<a href="javascript:;" id= "editTag">对标签重命名</a>
						</div>
						
						<form action="" style="display:none" id="changeTag">
							标签名：<input type="text" value="${tagName }" style="margin-bottom:0px"/>
							<button class="btn " type="button" id="saveTag" style="font-size:12px;padding:1px 5px">重名名</button>&nbsp;或
							<a href="javascript:;" id="cancal" >取消</a>
						</form>
						
					</div>
					<div class="row">
						<div class="span7" style="height:800px">
							<div class="liner">
								<a href="#">显示这些客户的所有记录</a>
								<div style="height:10px"></div>
								<hr>
								
								<table class="tables">
									<thead>
							    		<tr class="add">
							    			<th colspan = "3">
							    				<span id="choose">
							    					选择联系人,添加标签,修改浏览权限,或者删除
							    					<a href="javascript:;" style="color:#999999;float:right" id="selectAll">全选</a>
							    				</span>
							    			
							    				<div class="invitation" >
							    					<div style="font-weight:bold;color:#000">
							    						<span id="num"></span>个被选中
							    					</div>
							    					<a  href="javascript:;" id="add-tag">添加一个标签</a>
							    					<a  href="javascript:;" id="edit-view">修改浏览权限</a>
							    					<a  href="javascript:;" id="del-contact">删除</a>
							    					<a href="javascript:;" style="background-color:#FFF;float:right" id="selectNone" >全不选</a>
							    					
							    					<form class="create-add-tag">
							    						<input type="hidden" id="contactids"/>
							    						<div class="add-tag" >
							    							<input type="text" style="margin-bottom:0px"/>
							    							<button class="btn" style="font-size:12px;padding:1px 5px" type="button" id="save-tag">保存标签</button>
							    						</div>
									
														<div class="edit-view" style="display:none">
															<span >谁能看到这些客户?</span>
															<input type="hidden" id="views" />
															<label class="radio" style="font-size:12px;margin-top:10px">
																<input type="radio" name="views" class="views" value="all" checked="checked">
																所有的人
																</label>
															<label class="radio" style="font-size:12px">
																<input type="radio" name="views" class="views" value="${cur_user.id }">
																只有我
															</label>
															<label class="radio" style="font-size:12px">
																<input type="radio" name="views" class="views" value="我和以下这些人">
																我和以下这些人
															</label>
															<div id="other" style="display:none;">
																<select  id="others" multiple style="width:300px">
																	<c:forEach items="${userList}" var="user">
																		<option value="${user.id }">${user.username }</option>
																	</c:forEach>
																</select>
															
															</div>
															<hr/>
															<div >
																<button class="btn " type="button" id="saveViews" style="font-size:12px;padding:1px 5px">保存</button>&nbsp;或
																<a href="#" >取消</a>
															</div>
																
														</div>
														
														<div class="del-contact">
															你确定要删除吗？
															<br style="margin-bottom:10px"/>
															<button class="btn " type="button" id="delContact" style="font-size:12px;padding:1px 5px;">我明白，并且删除</button>&nbsp;或
															<a href="#" >取消</a>
														</div>
							    					
							    					</form>
							    					
							    				</div>
							    			</th>
							    		</tr>
							    	
							    	</thead>
							    </table>
							    
							    <div id="content">	
							    <table class="tables">
							    	<c:forEach items="${contactList }" var="contact">
							    		<tr>
											<td class="checkbox">
												<c:if test="${contact.user.id == cur_user.id }">
													<input type="checkbox" name="contact" class="check" value="${contact.id }"/>
												</c:if>
											</td>
											<td class="avatar">
												<img alt="" src="<%=basePath %>img/people.png">
											</td>
								    		<td class="party">
								    			<h5 >
								    				<c:choose>
								    					<c:when test="${contact.type == '公司' }">
								    						<a href="<%=basePath%>contact/company.action?c=${contact.id}">
								    							${contact.name }
								    						</a>
								    					</c:when>
								    					<c:otherwise>
								    						<a href="<%=basePath%>contact/people.action?c=${contact.id}">
								    							${contact.name }
								    						</a>
								    					</c:otherwise>
								    				</c:choose>
								    			</h5>
								    			
								    			<div class="createby">
									    			${contact.position }
									    			<c:if test="${contact.company != null}">
									    				at
										    			<a href="cid">
										    				${contact.company }	
										    			</a>
									    			
									    			</c:if>
									    			
									    			<div>
									    				<c:forEach items="${contact.emaillist }" var="email">
									    					<c:if test="${email.type == '工作' }">
									    						${email.name}
									    					</c:if>
									    				</c:forEach>
									    				<c:forEach items="${contact.phonelist }" var="phone">
									    					<c:if test="${phone.type == '工作' }">
									    						&nbsp;&nbsp;${phone.name}
									    					</c:if>
									    				</c:forEach>
									    			</div>
									    			<div>
									    				<c:forEach items="${contact.tagList }" var="tag">
									    					<a href="#" class="tag">${tag.name }</a>
									    				</c:forEach>
									    				
									    			</div>
									    			
									    			<div>--by ${contact.user.username}</div>
									    			
								    			</div>
								    			
								    		</td>
								    	</tr>
							    	
							    	</c:forEach>

								</table>
								</div>
							</div>
						</div>
						<div class="span3" style="margin-left:0px;border-left: 1px solid #CCCCCC;width:237px">
							<div class="right-liner">
								<h6 class="timeline">轻松导出</h6>
								<span >
									<a href="#">导出</a>标签名为“${tagName }”的客户资料
									
								</span>

								<h6 class="timeline">通过标签浏览</h6>
								<span >
									<c:forEach items="${tagNames }" var="tag">
										<c:choose>
											<c:when test="${tag == tagName }">
												<a href="javascript:;" class="tag"  rel="${tag }" style="background-color:#555;color:#fff">${tag }</a>
											</c:when>
											<c:otherwise>
												<a href="javascript:;" class="tag"  rel="${tag }">${tag }</a>
											</c:otherwise>
										</c:choose>
										<hr>
									</c:forEach>
									
								</span>


							</div>
						</div>

					</div>
					
					
				</div>
				
			</div>
			
		</div>
	</div>

	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/select2/select2.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/date.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.datePicker.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		
		//保存任务
			$(".savetask").live("click",function(){
				$(this).hide();
				$(this).next().show();
				var content = $(".taskcontent").val();
				var time = $(".time").val();
				var taskuserid = $(".taskuserid").val();
				var category = $(".category").val();
				var views = null;
				if($(".taskviews").attr("checked")) {
					views = "all";
				}
				var $task = $(this).parent().parent().parent();
							
				$.post("<%=basePath%>task/saveTask.action",{
					"task.content" : content,
					"task.time":time,
					"task.user.id":taskuserid,
					"task.category":category,
					"task.views" : views
					},function(){
						//保存成功后清除所有记录
						$("#top").empty();
						$task.hide();
				});
			});
		
		
		//已经做了修改,一下的都不用用live了，为了节省时间我不改过来了
		//全选
		$("#selectAll").click(function(){
			$(".check").each(function(){
				$(this).attr("checked","checked");
				$(this).parent().parent().css("background-color", "#FFFFCC");
			});
			$("#choose").hide();
			showChoose();
		});
		//全不选
		$("#selectNone").click(function(){
			$(".check").each(function(){
				$(this).removeAttr("checked");
				$(this).parent().parent().css("background-color", "#FFF");
			});
			
			hideChoose();
		});
		
		//对标签重命名
			$("#editTag").click(function(){
				$(".tagName").hide();
				$("#changeTag").show(function(){
					$(this).children().eq(0).focus();
				});
			});
			
			$("#cancal").click(function(){
				$("#changeTag").hide();
				$(".tagName").show();
			});
		
		//根据标签查找
			$(".tag").click(function(){
				$(".tag").css("background-color","#F0F0F0").css("color","#000");
				$(this).css("background-color","#555").css("color","#fff");
				var tagName = $(this).attr("rel");
				$("#tagTitle").text(tagName);
				
				var href = "<%=basePath %>contact/findByTag.action?tagName=" + tagName;//需要改变的地址名称
				history.pushState({ path: this.path }, '', href);
				
				$("#content").load("<%=basePath%>contact/showType.action",{"content":"tag","findTag":tagName},function(){
					$(this).children().fadeIn("slow");
				});
				
			});
		
		
			//删除
			$("#delContact").click(function(){
				//获得选中的客户的id字符串
				checkboxVal();
				var id = $("#contactids").val();
				var findTag = $("#tagTitle").text();
				$("#content").load("<%=basePath%>contact/showType.action",{
				"content":"tag",
				"contact.id":id,
				"way":"delContact",
				"findTag":findTag
				},function(){
					hideChoose();
					$(this).children().fadeIn("slow");
				});
			});
			
			
			//select2权限
			$("#others").select2();
			var v = $(".views").eq(2).attr("checked");
			if(v == "checked" ) {
				$("#other").show();
			} 
			
			$(".views").live("click",function(){
				if($(this).val() == "我和以下这些人") {
					$("#other").show();
				} else {
					$("#other").hide();
				}
			});
			
			//修改权限(select2选择输出的是一个数组)
			$("#saveViews").click(function(){
				
				var views = $(".views:checked").val();
				if(views == "我和以下这些人") {
					//把select2输出的数组拼成字符串
					var str = $("#others").val();
					var v = "${cur_user.id}";
					for(var i = 0 ; i < str.length; i ++ ) {
						v += "," + str[i] ;
					}
					views = v;
				}
				
				var findTag = $("#tagTitle").text();
				checkboxVal();
				var id = $("#contactids").val();
				$("#content").load("<%=basePath%>contact/showType.action",{
				"content":"tag",
				"contact.views":views,
				"contact.id":id,
				"way":"changeViews",
				"findTag":findTag
				},function(){
					hideChoose();
					$(this).children().fadeIn("slow");
				});
			});
		
			//添加标签
			//所有复选框下对应的contact的id
			function checkboxVal(){
				var v = "";
				$(".check:checked").each(function(){
					v =  $(this).val() + "," + v;
				});
				$("#contactids").val(v);
			}
			
			$("#save-tag").live("click",function(){
				var tagName = $(this).prev().val();
				checkboxVal();
				var id = $("#contactids").val();
				
				var findTag = $("#tagTitle").text();
				
				$("#content").load("<%=basePath%>contact/showType.action",{
				"content":"tag",
				"tagName":tagName,
				"contact.id":id,
				"way":"addTag",
				"findTag":findTag
				},function(){
					hideChoose();
					$(this).children().fadeIn("slow");
				});
				
			});
			
			//选择项出现函数
			function showChoose(){
				var num = $(".check:checked").length;
				$("#num").text(num);
				$(".invitation").fadeIn("slow");
			}
			
			//选项隐藏函数
			function hideChoose(){
				$(".create-add-tag").hide();
				$("#add-tag").css("background-color","#DFDFDF").css("color","#000");
				$("#edit-view").css("background-color","#DFDFDF").css("color","#000");
				$("#del-contact").css("background-color","#DFDFDF").css("color","#000");
				$(".invitation").fadeOut("slow",function(){
					$("#choose").fadeIn("slow");
				});
			}
			
			//选择
			$(".check").each(function(){
				if($(this).attr("checked") == "checked") {
					$(this).parent().parent().css("background-color", "#FFFFCC");
					$("#choose").hide();
					showChoose();
				}
			});
			
			
			//这个地方不太合理（已解决，根据选中的长度来判断）
			$(".check").live("click",function(){
				if($(this).attr("checked") == "checked") {
					$(this).parent().parent().css("background-color", "#FFFFCC");
					$("#choose").fadeOut("slow",function(){
						showChoose();
					});
				} else {
					$(this).parent().parent().css("background-color", "#FFF");
						//根据选中的长度来判断是否有选中的，真是个不错的办法
						if($(".check:checked").length == 0) {
							hideChoose();
						} else {
							showChoose();
						}
				}
			});
			
			//选择中的选项
			$("#add-tag").live("click",function(){
				$(this).css("background-color","#4073BF").css("color","#fff");
				$("#edit-view").css("background-color","#DFDFDF").css("color","#000");
				$("#del-contact").css("background-color","#DFDFDF").css("color","#000");
				$(".edit-view").hide();
				$(".del-contact").hide();
				$(".create-add-tag").fadeIn("slow",function(){
					$(".add-tag").fadeIn("slow",function(){
						$(this).children().eq(0).focus();
					});
					
				});
			});
			$("#edit-view").live("click",function(){
				$(this).css("background-color","#4073BF").css("color","#fff");
				$("#add-tag").css("background-color","#DFDFDF").css("color","#000");
				$("#del-contact").css("background-color","#DFDFDF").css("color","#000");
				$(".add-tag").hide();
				$(".del-contact").hide();
				$(".create-add-tag").fadeIn("slow",function(){
					$(".edit-view").fadeIn("slow");
					
				});
			});
			$("#del-contact").live("click",function(){
				$(this).css("background-color","red").css("color","#fff");
				$("#add-tag").css("background-color","#DFDFDF").css("color","#000");
				$("#edit-view").css("background-color","#DFDFDF").css("color","#000");
				$(".add-tag").hide();
				$(".edit-view").hide();
				$(".create-add-tag").fadeIn("slow",function(){
					$(".del-contact").fadeIn("slow");
					
				});
			});
			
			$("#change-view").live("click",function(){
				$("#views").show();
				$("#way").hide();
				$(this).hide();
			});

		});
	</script>
</body>
</html>